<template>
    <BasePanel width="440px" height="144px" :show-header="false">
        <template #default>
            <div class="panel-content">
                <div v-for="item in listData" :key="item.label" class="item">
                    <div class="label">{{ item.label }}</div>
                    <div class="pie-content">
                        <div class="legend-box">
                            <div
                                class="legend-item"
                                v-for="legend in item.data"
                                :key="legend.label"
                            >
                                <span class="legend-label">{{ legend.label }}</span>
                                <div class="value-box">
                                    <span :style="{ color: legend.color }" class="value">
                                        {{ legend.value }}
                                    </span>
                                    <span class="unit">{{ legend.unit }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="charts">
                            <BaseEcharts v-if="item.chartOptions" :options="item.chartOptions" />
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </BasePanel>
</template>

<script setup lang="ts">
import BasePanel from '@/components/BasePanel/index.vue'
import BaseEcharts from '@/components/BaseEcharts/index.vue'
// import { useGlobalStore } from '@/store/global'
// import { getFpiAssetsFile } from '@/utils/tools'

// 全局数据
// const globalStore = useGlobalStore()

const listData = shallowRef([
    {
        label: '示范创建',
        data: [
            {
                label: '国家级',
                value: 6,
                unit: '个',
                color: 'rgba(1, 254, 133, 1)',
            },
            {
                label: '省级',
                value: 6,
                unit: '个',
                color: 'rgba(247, 122, 32, 1)',
            },
        ],
        chartOptions: null as any,
    },
    {
        label: '教育基地',
        data: [
            {
                label: '浙江省',
                value: 347,
                unit: '家',
                color: 'rgba(1, 254, 133, 1)',
            },
            {
                label: '杭州市',
                value: 82,
                unit: '家',
                color: 'rgba(247, 122, 32, 1)',
            },
        ],
        chartOptions: null as any,
    },
])

const createChartsOptions = (data: any[]) => {
    return {
        grid: {
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
        },
        legend: {
            show: false,
        },
        series: [
            {
                name: '',
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['50%', '86%'],
                avoidLabelOverlap: true,
                hoverAnimation: false,
                data: data.map(item => {
                    return {
                        value: item.value,
                        itemStyle: {
                            color: item.color,
                        },
                    }
                }),
                itemStyle: {
                    normal: {
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false,
                        },
                    },
                },
            },
        ],
    }
}

onMounted(() => {
    listData.value[0].chartOptions = createChartsOptions(listData.value[0].data)
    listData.value[1].chartOptions = createChartsOptions(listData.value[1].data)
    listData.value = [...listData.value]
})
</script>

<style lang="scss" scoped>
.panel-content {
    width: 100%;
    height: 100%;
    display: flex;
    gap: 24px;

    .item {
        flex: 1;
        height: 100%;
        flex-shrink: 0;
        width: 0;

        .label {
            font-size: 20px;
            font-weight: 700;
            line-height: 20px;
            color: rgba(255, 255, 255, 1);
            height: 20px;
            margin-bottom: 12px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pie-content {
            width: 100%;
            height: calc(100% - 32px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 6px;

            .legend-box {
                width: 60%;
                display: flex;
                flex-direction: column;
                gap: 8px;

                .legend-item {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .legend-label {
                        font-size: 18px;
                        font-weight: 700;
                        line-height: 18px;
                        height: 18px;
                        color: rgba(255, 255, 255, 1);
                    }

                    .value-box {
                        display: flex;
                        align-items: center;
                        gap: 4px;

                        .value {
                            font-size: 24px;
                            font-weight: 400;
                            line-height: 24px;
                            height: 24px;
                            font-family: Oswald;
                        }

                        .unit {
                            font-size: 16px;
                            font-weight: 700;
                            line-height: 16px;
                            color: rgba(255, 255, 255, 1);
                            height: 16px;
                        }
                    }
                }
            }

            .charts {
                flex: 1;
                width: 0;
                height: 100%;
            }
        }
    }
}
</style>
